<template>
	<view>
		<view class="top" >
			<view class="left">
				<image @click="fanhui" src="../../static/info/jiantou.png" class="biao"></image>
			</view>
			<view class="center">
				账号详情
			</view>
			<view class="right">
				<image @click="open" src="../../static/info/share.png" class="biao" style="width: 30rpx;height: 30rpx;margin-top:20rpx ;"></image>
			</view>
		</view>
		
		<view class="box">
			<view class="title">{{item.level}}-{{item.sex}}-{{item.zhiye}}-{{item.jineng}}</view>
			<view class="price"><text style="font-size: 24rpx;">￥</text>{{item.price}}</view>
			<view><text class="op list">商品区服:</text><text class="text">{{item.game}}｜{{item.device}}</text></view>
			<view><text class="op list">发布时间:</text><text class="text">{{item.create_time}}</text></view>
			<view><text class="op list">商品编号:</text><text class="text">00000{{item.id}}</text></view>
		</view>
		
		<view class="box">
			<view class="account">账号信息</view>
			<table class="table" >
				<tr>
					<td class="t_left op list">主号名称</td>
					<td class="t_right text">{{item.name}}</td>
				</tr>
				<tr>
					<td class="t_left op list">主号等级</td>
					<td class="t_right text">{{item.level}}</td>
				</tr>
				<tr>
					<td class="t_left op list">主号性别</td>
					<td class="t_right text">{{item.sex}}</td>
				</tr>
				<tr>
					<td class="t_left op list">主号职业</td>
					<td class="t_right text">{{item.zhiye}}</td>
				</tr>
				<tr>
					<td class="t_left op list">主号技能</td>
					<td class="t_right text">{{item.jineng}}</td>
				</tr>
				<tr>
					<td class="t_left op list">主号装备</td>
					<td class="t_right text">{{item.zhuangbei}}</td>
				</tr>
				<tr>
					<td class="t_left op list">声望</td>
					<td class="t_right text">{{item.shengwang}}</td>
				</tr>
				<tr>
					<td class="t_left op list">充值封号</td>
					<td class="t_right text">{{item.czfh}}</td>
				</tr>
				<tr v-if="device_info.is_person_name=='是'">
					<td class="t_left op list">英雄名称</td>
					<td class="t_right text">{{item.person_name}}</td>
				</tr>
				<tr v-if="device_info.is_person_name=='是'">
					<td class="t_left op list">英雄等级</td>
					<td class="t_right text">{{item.person_level}}</td>
				</tr>
				<tr v-if="device_info.is_person_name=='是'">
					<td class="t_left op list">英雄职业</td>
					<td class="t_right text">{{item.person_zhiye}}</td>
				</tr>
				<tr v-if="device_info.is_person_name=='是'">
					<td class="t_left op list">英雄技能</td>
					<td class="t_right text">{{item.person_jineng}}</td>
				</tr>
				<tr v-if="device_info.is_person_name=='是'">
					<td class="t_left op list">英雄装备</td>
					<td class="t_right text">{{item.person_zhuangbei}}</td>
				</tr>
				<tr v-if="device_info.is_jinling=='是'">
					<td class="t_left op list">金令到期时间</td>
					<td class="t_right text">{{item.create_at}}</td>
				</tr>
				<tr v-if="device_info.is_lt=='是'">
					<td class="t_left op list">是否绿通</td>
					<td class="t_right text" v-if="item.is_lv=='是'||item.is_lv=='否'">{{item.is_lv}}</td>
				</tr>
				<tr v-if="device_info.is_zhizun=='是'">
					<td class="t_left op list">是否至尊通行证</td>
					<td class="t_right text" v-if="item.is_tx=='是'||item.is_tx=='否'">{{item.is_tx}}</td>
				</tr>
				
				
				<tr>
					<td colspan="2" class="text" style="font-size: 22rpx;padding-left: 30rpx;padding-top: 10rpx;padding-bottom: 10rpx;">{{item.desc}}</td>
	
				</tr>
			</table>
		</view>
		
		<zPopup :show="show" :mode="'center'" @closeCar="closeCar">
			<!-- 插槽可自定义内容 -->
			<template v-slot:center>
				<view style="width: 100%;height: 500rpx;background: #fff;border-radius: 40rpx;text-align: center;">
					<view style="padding-top:10px; padding-bottom: 10px; width: 90%;margin-left: 5%; margin-top:60rpx ; font-weight: bold;">免费自助挂号</view>
					<image :src="item.qrcode" style="width: 300rpx;height: 300rpx;"></image>
				</view>
			</template>
		</zPopup>


		
		<view class="box">
			<view class="account">客服信息</view>
			<view style="width: 100%;display: flex;">
				<image :src="kefu.image" class="erweima2"></image>
				<view style="color: #1e1e1e;font-size: 22rpx;margin-top: 40rpx;">
					<view class="kefu_text">{{kefu.title}}</view>
					<view class="kefu_text">{{kefu.work}}</view>
					<view class="kefu_text">微信：{{kefu.weixin}}</view>
				</view>
			</view>
		</view>
		
		<view style="height: 200rpx;"></view>
		
		<view class="t_bottom">
			<view class="price2">价格：</view>
			<view class="unit">￥</view>
			<view class="amount">{{item.price}}</view>
			<view @click="collect" class="bttn">
				<view style="height: 70rpx;"><image src="../../static/my/xin.png" class="img"></image></view>
				<view style="font-size: 28rpx;height: 70rpx;line-height: 70rpx;">加入收藏</view>
			</view>
			<view @click="kefu2" class="bttn">
				<view style="height: 70rpx;"><image src="../../static/tabbar/tab_07.png" class="img"></image></view>
				<view style="font-size: 28rpx;height: 70rpx;line-height: 70rpx;">联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zPopup from "../components/zpopup.vue"

	export default {
		
		data() {
			return {
				show: false,
				item:{},
				kefu:{},
				device_info:{}
			}
		},
		components: {
			zPopup
		},
		onLoad(options) {
			if(options.item){
				var item = JSON.parse(options.item)
				if(item){
					this.item = item
				}
			}else{
				if(options.id){
					this.item.id = options.id
				}
			}
			var that = this
			uni.request({
				url:getApp().globalData.host+'srapi/home/kefu',
				method:'POST',
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				success: (res) => {
					if(res.data.data){
						
						that.kefu = res.data.data
					}
				}
			})
			uni.request({
				url:getApp().globalData.host+'srapi/home/info',
				method:'POST',
				header: { // 设置请求的header
					'content-type': 'application/json' // 默认值
				},
				data:{
					id:that.item.id
				},
				success: (res) => {
					that.item = res.data.data
					
					
					uni.request({
						url:getApp().globalData.host+'srapi/home/device_info',
						method:'POST',
						header: { // 设置请求的header
							'content-type': 'application/json' // 默认值
						},
						data:{
							device:that.item.device,game:that.item.game
						},
						success: (res) => {
							that.device_info = res.data.data
						}
					})
					
				}
			})
			
			
			
			
		},
		onShow() {
			var that = this
			setTimeout(function(){
				uni.request({
					url:getApp().globalData.host+'srapi/home/info',
					method:'POST',
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					data:{
						id:that.item.id
					},
					success: (res) => {
						that.item = res.data.data
						
						uni.request({
							url:getApp().globalData.host+'srapi/home/device_info',
							method:'POST',
							header: { // 设置请求的header
								'content-type': 'application/json' // 默认值
							},
							data:{
								device:that.item.device,game:that.item.game
							},
							success: (res) => {
								that.device_info = res.data.data
							}
						})
					}
				})
			},2000)
			
		},
		methods:{
			fanhui(){
				uni.navigateBack()
			},
			//打开弹窗
			open() {
				//做一些数据回显的话优先调接口，再显示弹窗
				setTimeout(() => {
					this.show = true;
				}, 200)
			},
			//关闭弹窗
			closeCar() {
				this.show = false;
			},
			kefu2(){
				uni.navigateTo({
					url:'/pages/index/kefu'
				})
			},
			collect(){
				var that = this
				if(!uni.getStorageSync('member')){
					 uni.showToast({ title: '请登录！', icon: 'none' });
					 setTimeout(function(){
						 uni.navigateTo({
							url:'/pages/my/login'
						 })
					 },2000)
					 return
				}
				var member = uni.getStorageSync('member')
				uni.request({
					url:getApp().globalData.host+'srapi/home/collect',
					method:'POST',
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					data:{
						member_id:member.id,fabu_id:that.item.id
					},
					success: (res) => {
						if(res.data.msg==''){
							uni.showToast({
								title:'收藏成功'
							})
						}else{
							uni.showToast({
								title:res.data.msg
							})
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/* #ifdef H5 */
	page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
	/* #endif */
	
	.top{
		width: 100%;height: 74rpx;display: flex;background-color: #fff;
	}
	.left{
		width: 10%;text-align: center;
	}
	.center{
		width: 80%;text-align: center; line-height: 74rpx;
	}
	.right{
		width: 10%;text-align: center;
	}
	.biao{
		width: 25rpx;
		height: 25rpx;
		margin: auto;
		margin-top: 20rpx;
	}
	.img{
		width: 30rpx;
		height: 30rpx;
		margin-top:20rpx ;
		margin-left:40rpx ;
		margin-right:20rpx ;
	}
	.box{
		width: 100%;background-color: #fff; padding: 20rpx;		margin-top: 20rpx;
	}
	.title{
		font-size: 28rpx;font-weight: 700;
	}
	.price{
		color:red;font-size: 42rpx;padding-left: 15rpx;padding-top: 15rpx; padding-bottom: 20rpx;
	}
	.list{
		color: #2F2F2F;font-size: 24rpx; margin-right: 20rpx;padding-left: 15rpx;
	}
	.op{
		opacity: 0.5;
	}
	.text{
		color: #1e1e1e;font-size: 24rpx;
	}
	.account{
		font-size: 25rpx;padding-left: 15rpx;
	}
	.table{
		width: 85%;border: 1px solid #eee;margin-left: 5%;margin-top: 20rpx;
	}
	.t_left{
		width: 45%;text-align: left; padding-left: 5%; border-right: 1px solid #eee;
	}
	.t_right{
		width: 55%;text-align: left; padding-left: 5%;
	}
	table {
	  border-collapse: separate; /* 确保边框分开 */
	  border-spacing: 10px 0; /* 行间距 */
	}
	table tr {
	  position: relative; /* 为伪元素定位 */
	}
	table td {
	  align-items: center;
	  height: 70rpx; 
	  line-height: 50rpx;
	}
	table tr::after {
	  content: "";
	  position: absolute; /* 使用绝对定位 */
	  left: 0; right: 0; /* 宽度覆盖整行 */
	  bottom: -0px; /* 根据需要调整位置 */
	  border-bottom: 1px solid #eee; /* 下划线样式 */
	}
	.erweima2{
		width: 150rpx;height: 150rpx; padding: 20rpx; padding-left: 0rpx;
	}
	.kefu_text{
		line-height: 40rpx;
		height: 40rpx;
	}
	.t_bottom{
		width: 100%;height: 100rpx;background-color: #fff; position: fixed; bottom: 0rpx;left: 0rpx;display: flex;
	}
	
	.price2{
		margin-top: 35rpx;font-size: 22rpx;margin-left: 15rpx;
	}
	.unit{
		margin-top: 35rpx;font-size: 22rpx;color: red;
	}
	.amount{
		margin-top: 20rpx;font-size: 36rpx;color: red;
	}
	
	.bttn{
		width: 254rpx;
		height: 70rpx;
		margin-top: 15rpx;
		margin-left: 25rpx;
		background: #f4f4f4;
		border-radius: 15rpx;
		display: flex;
	}
	
</style>